<template>
	<view class="page">  
		<view class="item-block">
			<text class="item-lable">栏　　目：</text>
			<picker @change="pickerType" :value="indext" range-key="value" :range="type" class="item-input icon-right"> 
				<view :class="[indext==''?'item-default':'']">{{type[indext].value||"请选择"}}</view>      
			</picker>
		</view>
		<view v-if="indext==0">    
			<addNews></addNews>
		</view>
		<view v-else-if="indext==1">
			<addVideo></addVideo>
		</view>
		<view v-else>      
			<addFriend></addFriend> 
		</view>
	</view>
</template>

<script>
	import addNews from '@/components/fabu/addNews.vue';  
	import addVideo from '@/components/fabu/addVideo.vue';  
	import addFriend from '@/components/fabu/addFriend.vue';   
	export default {
		components: {
			addNews,
			addVideo,
			addFriend
		},
		data() {
			return {
				indext:1,
				type:[{'id':0,'value':'新闻'},
					{'id':1,'value':'视频'},
					{'id':2,'value':'交友'}]
			}
		},
		methods: {
			pickerType(e){
				this.indext=e.target.value; 
			}			
		}
	}
</script>

<style>
	page{
		margin:0 auto;
		padding:3%;
		background:#FFFFFF;
		font-size:25upx;
		width:94%;
	}
	.item-block{
		height:auto;
		padding:5px 0;
		display: flex;
		flex-direction:row;  
		align-items: center; 
		justify-content: center;
		position: relative;
	}
	.item-lable{
		height:auto;
	}
	.item-input{
		height:30px;
		line-height:30px;
		padding:0 5px;
		background:#F2F2F2;
		border-radius: 5px;
		-webkit-flex: 1;
		flex: 1;
	}
	.item-default{
		color:#7A7A7A;
	}
	.icon-right:after{
		font-family: "iconfont" !important;
		content: "\e63c";    
		font-size:20px;
		position: absolute; 
		color:#666666;
		top:0;
		right:0;
	}
</style>
